<template>
  <div class="test-step-content">
    <div>
      <h3>补全申请资料</h3>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 基本信息标签页（保持原有功能） -->
        <el-tab-pane label="基本信息" name="first">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="120px"
            class="form-content"
          >
            <!-- 老人姓名 -->
            <el-form-item label="老人姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入"
                maxlength="10"
                show-word-limit
              />
            </el-form-item>

            <!-- 老人身份证号 -->
            <el-form-item label="老人身份证号" prop="idCard">
              <el-input
                v-model="formData.idCard"
                placeholder="请输入"
                maxlength="18"
                show-word-limit
                @input="handleIdCardInput"
              />
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 出生日期 -->
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                v-model="formData.birthDate"
                type="date"
                placeholder="选择出生日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="calculateAge"
                readonly
              />
            </el-form-item>

            <!-- 年龄 -->
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model.number="formData.age"
                placeholder="年龄"
                disabled
              />
            </el-form-item>

            <!-- 联系方式 -->
            <el-form-item label="联系方式" prop="contact">
              <el-input
                v-model="formData.contact"
                placeholder="请输入"
                maxlength="11"
                show-word-limit
              />
            </el-form-item>

            <!-- 家庭住址 -->
            <el-form-item label="家庭住址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入"
                maxlength="100"
                show-word-limit
                type="textarea"
                rows="2"
              />
            </el-form-item>

            <!-- 民族（替换后） -->
            <el-form-item label="民族" prop="ethnicity">
              <el-select v-model="formData.ethnicity" placeholder="请选择">
                <!-- 直接用 ethnic 变量，加 || [] 避免未加载时报错 -->
                <el-option
                  v-for="item in ethnic || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 政治面貌（替换后） -->
            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select
                v-model="formData.politicalStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in politics || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 宗教信仰（替换后） -->
            <el-form-item label="宗教信仰" prop="religion">
              <el-select v-model="formData.religion" placeholder="请选择">
                <el-option
                  v-for="item in religion || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 婚姻状况（替换后） -->
            <el-form-item label="婚姻状况" prop="maritalStatus">
              <el-select v-model="formData.maritalStatus" placeholder="请选择">
                <el-option
                  v-for="item in marriage || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 文化程度（替换后） -->
            <el-form-item label="文化程度" prop="education">
              <el-select v-model="formData.education" placeholder="请选择">
                <el-option
                  v-for="item in culture || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 经济来源（替换后） -->
            <el-form-item label="经济来源" prop="incomeSource">
              <el-select v-model="formData.incomeSource" placeholder="请选择">
                <el-option
                  v-for="item in economy || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 特长爱好（替换后） -->
            <el-form-item label="特长爱好" prop="hobbies">
              <el-select v-model="formData.hobbies" placeholder="请选择">
                <el-option
                  v-for="item in hobbies || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 医疗保障（替换后） -->
            <el-form-item label="医疗保障" prop="medicalInsurance">
              <el-select
                v-model="formData.medicalInsurance"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in medical || []"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 医保卡号 -->
            <el-form-item label="医保卡号" prop="medicalCardNo">
              <el-input
                v-model="formData.medicalCardNo"
                placeholder="请输入"
                maxlength="19"
                show-word-limit
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 家属信息标签页（保持原有功能） -->
        <el-tab-pane label="家属信息" name="second">
          <div class="tab-content">
            <el-table
              :data="familyList"
              border
              class="family-table"
              style="width: 100%"
            >
              <!-- 家属姓名列 -->
              <el-table-column label="家属姓名" align="center">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.name"
                    placeholder="请输入"
                    maxlength="10"
                    show-word-limit
                    size="small"
                  />
                </template>
              </el-table-column>

              <!-- 家属联系方式列 -->
              <el-table-column label="家属联系方式" align="center">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.contact"
                    placeholder="请输入"
                    maxlength="11"
                    show-word-limit
                    size="small"
                  />
                </template>
              </el-table-column>

              <!-- 与老人关系列 -->
              <el-table-column label="与老人关系" align="center">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.relationship"
                    placeholder="请选择"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option label="配偶" value="配偶" />
                    <el-option label="子女" value="子女" />
                    <el-option label="父母" value="父母" />
                    <el-option label="兄弟姐妹" value="兄弟姐妹" />
                    <el-option label="亲属" value="亲属" />
                    <el-option label="朋友" value="朋友" />
                    <el-option label="其他" value="其他" />
                  </el-select>
                </template>
              </el-table-column>

              <!-- 操作列 -->
              <el-table-column label="操作" align="center" width="100">
                <template #default="scope">
                  <div class="operate-btns">
                    <!-- 删除按钮 -->
                    <el-button
                      icon="Close"
                      size="mini"
                      type="danger"
                      style="width: 30px; height: 30px"
                      @click="handleDelete(scope.$index)"
                    />

                    <!-- 新增按钮（只在最后一行显示） -->
                    <el-button
                      v-if="scope.$index === familyList.length - 1"
                      icon="Plus"
                      size="mini"
                      type="primary"
                      style="width: 30px; height: 30px"
                      @click="handleAdd"
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 资料上传标签页 -->
        <el-tab-pane label="资料上传" name="third">
          <div class="upload-container">
            <!-- 顶部提示条 -->
            <div class="upload-tip">
              <i class="el-icon-info"></i>
              图片大小不超过2M，仅支持上传PNG、JPG、JPEG类型图片
            </div>

            <!-- 上传项：一寸照片 -->
            <div class="upload-item">
              <label class="item-label">一寸照片</label>
              <!-- 关键：用独立 ref 绑定输入框 -->
              <div class="upload-box" @click="() => fileInputOneInch.click()">
                <input
                  ref="fileInputOneInch"
                  type="file"
                  class="hidden"
                  accept="image/jpeg,image/png"
                  @change="(e) => handleFileChange(e, 'oneInch')"
                />
                <div v-if="!uploadFiles.oneInch" class="placeholder">
                  <el-icon class="plus-icon"><Plus /></el-icon>
                  <p>点击上传图片</p>
                </div>
                <img
                  v-else
                  :src="uploadFiles.oneInch.url"
                  alt="预览"
                  class="preview-img"
                />
              </div>
            </div>

            <!-- 上传项：身份证人像面 -->
            <div class="upload-item">
              <label class="item-label">身份证人像面</label>
              <div
                class="upload-box"
                @click="() => fileInputIdCardFront.click()"
              >
                <input
                  ref="fileInputIdCardFront"
                  type="file"
                  class="hidden"
                  accept="image/jpeg,image/png"
                  @change="(e) => handleFileChange(e, 'idCardFront')"
                />
                <div v-if="!uploadFiles.idCardFront" class="placeholder">
                  <el-icon class="plus-icon"><Plus /></el-icon>
                  <p>点击上传图片</p>
                </div>
                <img
                  v-else
                  :src="uploadFiles.idCardFront.url"
                  alt="预览"
                  class="preview-img"
                />
              </div>
            </div>

            <!-- 上传项：身份证国徽面 -->
            <div class="upload-item">
              <label class="item-label">身份证国徽面</label>
              <div
                class="upload-box"
                @click="() => fileInputIdCardBack.click()"
              >
                <input
                  ref="fileInputIdCardBack"
                  type="file"
                  class="hidden"
                  accept="image/jpeg,image/png"
                  @change="(e) => handleFileChange(e, 'idCardBack')"
                />
                <div v-if="!uploadFiles.idCardBack" class="placeholder">
                  <el-icon class="plus-icon"><Plus /></el-icon>
                  <p>点击上传图片</p>
                </div>
                <img
                  v-else
                  :src="uploadFiles.idCardBack.url"
                  alt="预览"
                  class="preview-img"
                />
              </div>
            </div>
          </div>

          <!-- 预览弹窗 -->
          <el-dialog v-model="previewVisible" title="图片预览" width="600px">
            <img :src="previewUrl" alt="预览" style="width: 100%" />
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 图片预览弹窗（新增） -->
    <el-dialog
      v-model="previewDialog"
      title="图片预览"
      width="500px"
      :close-on-click-modal="true"
    >
      <img
        :src="previewImgUrl"
        alt="预览图片"
        style="width: 100%; height: auto"
      />
    </el-dialog>
    <!-- 底部按钮组（固定在底部） -->
    <div class="btn-group">
      <el-button @click="handleGoBack" size="default" plain class="mr-3">
        返回
      </el-button>
      <el-button type="primary" @click="handleSubmit" size="default">
        提交
      </el-button>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElForm, ElUpload, ElDialog } from "element-plus";
import axios from "axios";
const activeName = ref("first");
import { addElderly } from "@/api/system/elderly";
import { addMember } from "@/api/system/member";
import { useDict } from "@/utils/dict";
import useUserStore from '@/store/modules/user'
// 2. 获取用户存储实例
const userStore = useUserStore()

// 3. 在脚本中打印用户信息
console.log('当前登录用户信息：', {
  id: userStore.id,
  name: userStore.name,
  nickName: userStore.nickName,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
})
// 关键：直接解构出 ethnic、economy 等字典类型（不要用 dict 包裹）
const {
  ethnic,
  politics,
  religion,
  marriage,
  culture,
  economy,
  hobbies,
  medical,
} = useDict(
  "ethnic", // 民族
  "politics", // 政治面貌
  "religion", // 宗教信仰
  "marriage", // 婚姻状况
  "culture", // 文化程度
  "economy", // 经济来源
  "hobbies", // 爱好
  "medical" // 医疗保障
);
// 移除参数类型注解，保持函数逻辑不变
const handleClick = (tab, event) => {
  console.log(tab, event);
};
// 新增：从 Cookie 读取 Admin-Token（核心）
const getTokenFromCookie = () => {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key == "Admin-Token") return value;
  }
  return "";
};
const formRef = ref(null);

// 基本信息表单数据
const formData = reactive({
  name: "", // 老人姓名
  idCard: "", // 身份证号
  gender: "", // 性别
  birthDate: "", // 出生日期
  age: null, // 年龄
  contact: "", // 联系方式
  address: "", // 家庭住址
  ethnicity: "", // 民族
  politicalStatus: "", // 政治面貌
  religion: "", // 宗教信仰
  maritalStatus: "", // 婚姻状况
  education: "", // 文化程度
  incomeSource: "", // 经济来源
  hobbies: "", // 特长爱好
  medicalInsurance: "", // 医疗保障
  medicalCardNo: "", // 医保卡号
  // 新增：图片字段（与表结构对应）
  photo: "", // 一寸照片 URL（对应表中 photo 字段）
  idCardFront: "", // 身份证人像面 URL（对应表中 idCardFront 字段）
  idCardBack: "", // 身份证国徽面 URL（对应表中 idCardBack 字段）
});

// 家属信息列表（初始数据）
const familyList = ref([
  { name: "", contact: "", relationship: "" }, // 最后一行空表单
]);
//===================================

const fileInputOneInch = ref(null);
const fileInputIdCardFront = ref(null);
const fileInputIdCardBack = ref(null);
const uploadFiles = ref({
  // 存储已上传的文件信息（含后端返回的URL）
  oneInch: null,
  idCardFront: null,
  idCardBack: null,
});
const uploadProgress = ref({
  // 存储各类型上传进度
  oneInch: 0,
  idCardFront: 0,
  idCardBack: 0,
});
const previewVisible = ref(false); // 预览弹窗显隐
const previewUrl = ref(""); // 预览图URL
// 3. 处理文件选择变化（拿到文件后触发上传）
const handleFileChange = (e, type) => {
  const file = e.target.files[0];
  if (!file) return;

  // 第一步：验证文件格式和大小
  const isValid = validateFile(file);
  if (!isValid) {
    e.target.value = ""; // 清空选择，避免重复触发
    return;
  }

  // 第二步：发起上传请求
  uploadFileToServer(file, type);

  // 第三步：清空输入框（允许重复选择同一文件）
  e.target.value = "";
};

// 4. 文件格式/大小验证
const validateFile = (file) => {
  // 验证格式
  const validTypes = ["image/jpeg", "image/png"];
  if (!validTypes.includes(file.type)) {
    ElMessage.error("仅支持JPG、PNG格式的图片！");
    return false;
  }

  // 验证大小（2MB）
  const maxSize = 2 * 1024 * 1024; // 2MB
  if (file.size > maxSize) {
    ElMessage.error("图片大小不能超过2MB！");
    return false;
  }

  return true;
};

// 5. 核心：向后端上传文件（带进度监听）
const uploadFileToServer = async (file, type) => {
  try {
    // 构造FormData（必须正确，后端才能解析）
    const uploadFormData = new FormData();
    uploadFormData.append("file", file, file.name); // 第三个参数是文件名，避免浏览器自动处理
    // 获取Token（从Cookie中读取，适配常见的登录认证）
    const token = getTokenFromCookie();
    if (!token) {
      ElMessage.error("未获取到登录状态，请重新登录！");
      return;
    }
    // 发起上传请求（axios自动处理Content-Type，含boundary）
    const response = await axios({
      method: "POST",
      url: "http://localhost:8080/common/upload", // 后端上传接口地址
      data: uploadFormData,
      headers: {
        Authorization: `Bearer ${token}`, // 带 Token 认证
        "Content-Type": `multipart/form-data; boundary=${uploadFormData._boundary}`, // 强制正确格式
      },
      // 监听上传进度
      onUploadProgress: (progressEvent) => {
        const percent = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
        uploadProgress.value[type] = percent;
      },
    });
    // 处理后端响应（假设后端返回格式：{ code: 200, msg: "成功", url: "图片地址" }）
    if (response.data?.code === 200) {
      const imgUrl = response.data.url;
      // 根据 type 匹配字段名，赋值给 formData
      switch (type) {
        case "oneInch":
          formData.photo = imgUrl; // 一寸照片 → photo 字段
          break;
        case "idCardFront":
          formData.idCardFront = imgUrl; // 身份证人像面 → idCardFront 字段
          break;
        case "idCardBack":
          formData.idCardBack = imgUrl; // 身份证国徽面 → idCardBack 字段
          break;
      }
      // 存储后端返回的图片URL，用于预览和提交
      uploadFiles.value[type] = {
        name: file.name,
        size: file.size,
        type: file.type,
        url: response.data.url, // 后端返回的图片访问地址
      };
      ElMessage.success(`${getTypeName(type)}上传成功！`);
    } else {
      ElMessage.error(`上传失败：${response.data?.msg || "未知错误"}`);
    }
  } catch (error) {
    console.error(`[${type}]上传错误详情：`, error);
    const errorMsg =
      error.response?.data?.msg || "后端接口异常，请检查接口地址或网络！";
    ElMessage.error(`上传失败：${errorMsg}`);
  } finally {
    // 上传完成后重置进度（无论成功/失败）
    setTimeout(() => {
      uploadProgress.value[type] = 0;
    }, 500);
  }
};

// 7. 辅助函数：获取类型的中文名称（用于提示信息）
const getTypeName = (type) => {
  const typeMap = {
    oneInch: "一寸照片",
    idCardFront: "身份证人像面",
    idCardBack: "身份证国徽面",
  };
  return typeMap[type] || type;
};
// 10. 对外暴露上传文件信息（供表单提交时使用）
defineExpose({
  getUploadFiles: () => uploadFiles.value,
});

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: "请输入老人姓名", trigger: "blur" },
    { max: 10, message: "姓名长度不能超过10个字符", trigger: "blur" },
  ],
  idCard: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    {
      pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: "请输入有效的身份证号",
      trigger: "blur",
    },
  ],
  contact: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入有效的手机号",
      trigger: "blur",
    },
  ],
  address: [
    { required: true, message: "请输入家庭住址", trigger: "blur" },
    { max: 100, message: "地址长度不能超过100个字符", trigger: "blur" },
  ],
  hobbies: [
    { max: 20, message: "特长爱好长度不能超过20个字符", trigger: "blur" },
  ],
  medicalCardNo: [
    { max: 19, message: "医保卡号长度不能超过19个字符", trigger: "blur" },
  ],
});

// 接收父组件参数
const props = defineProps({
  stepNum: {
    type: Number,
    required: true,
  },
});

// 向父组件发送事件
const emit = defineEmits(["goBack", "submitSuccess"]);
// 身份证输入处理（自动提取生日和性别）
const handleIdCardInput = (value) => {
  if (value.length === 18) {
    const birthYear = value.slice(6, 10);
    const birthMonth = value.slice(10, 12);
    const birthDay = value.slice(12, 14);
    formData.birthDate = `${birthYear}-${birthMonth}-${birthDay}`;
    calculateAge(formData.birthDate);

    const genderCode = parseInt(value.slice(16, 17));
    formData.gender = genderCode % 2 === 1 ? "男" : "女";
  }
};

// 计算年龄
const calculateAge = (birthDate) => {
  if (!birthDate) return;
  const birth = new Date(birthDate);
  const today = new Date();
  let age = today.getFullYear() - birth.getFullYear();
  if (
    today.getMonth() < birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() < birth.getDate())
  ) {
    age--;
  }
  formData.age = age > 0 ? age : 0;
};

// 家属信息操作方法
const handleAdd = () => {
  const lastItem = familyList.value[familyList.value.length - 1];
  if (!lastItem.name && !lastItem.contact && !lastItem.relationship) {
    ElMessage.warning("请先填写当前行信息");
    return;
  }
  familyList.value.push({ name: "", contact: "", relationship: "" });
};

const handleDelete = (index) => {
  if (familyList.value.length <= 1) {
    ElMessage.warning("至少保留一行");
    return;
  }
  familyList.value.splice(index, 1);
};
// 返回按钮处理
const handleGoBack = () => {
  emit("goBack");
};

// 提交表单处理（新增：验证上传文件）
const handleSubmit = async () => {
  // 1. 验证基本信息表单（无论当前在哪个标签页，都需验证基本信息）
  if (formRef.value) {
    try {
      await formRef.value.validate();
    } catch (error) {
      ElMessage.error("请完善基本信息后再提交");
      // 自动切换到基本信息标签页，提示用户填写
      activeName.value = "first";
      return;
    }
  }

  // 2. 验证家属信息（过滤空行，确保至少有一条有效数据）
  const validFamilyList = familyList.value.filter(
    (item) => item.name && item.contact && item.relationship
  );
  if (validFamilyList.length === 0) {
    ElMessage.error("请至少填写一条有效的家属信息");
    activeName.value = "second"; // 自动切换到家属信息标签页
    return;
  }

  // 3. 验证上传图片（确保必填图片已上传）
  // 正确的验证逻辑（使用实际存储图片的 uploadFiles）
  if (!uploadFiles.value.oneInch) {
    ElMessage.error("请上传一寸照片");
    activeName.value = "third";
    return;
  }
  if (!uploadFiles.value.idCardFront) {
    ElMessage.error("请上传身份证人像面");
    activeName.value = "third";
    return;
  }
  if (!uploadFiles.value.idCardBack) {
    ElMessage.error("请上传身份证国徽面");
    activeName.value = "third";
    return;
  }

  // 4. 组装所有表单数据（修改 imageInfo 部分）
  // 正确的图片数据组装
  const submitData = {
    basicInfo: formData,
    familyInfo: validFamilyList,
  };

  // 5. 输出所有数据到控制台（核心需求）
  console.log("=== 提交的所有表单数据 ===", submitData);

  // 6. 模拟提交成功（原有逻辑保留）
  try {
    const response = await addElderly(submitData.basicInfo);
    console.log("后端返回的数据：", response.elderlyId);
    const elderlyId = response.elderlyId;
    // 2. 将老人ID关联到每条家属信息中（加入到validFamilyList的每条数据）
    const familyListWithElderlyId = validFamilyList.map((member) => ({
      ...member, // 保留原有家属信息（name、contact、relationship等）
      elderlyId: elderlyId, // 新增关联字段：老人ID（与后端FamilyMember实体的elderlyId对应）
    }));
    // 2. 逐条保存家属信息（关键修改：循环调用）
    for (const member of familyListWithElderlyId) {
      await addMember(member); // 每次传递单个家属对象
    }
    ElMessage.success(`步骤${props.stepNum}（申请入住）提交成功！`);
    emit("submitSuccess", elderlyId); // 传递老人ID
  } catch (error) {
    ElMessage.error("提交失败，请重试！");
  }
};
</script>
  
  <style scoped>
.test-step-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px); /* 适配视口高度 */
  padding: 20px;
  padding-bottom: 100px; /* 预留底部按钮高度，避免遮挡内容 */
  background-color: #fff;
  box-sizing: border-box;
}

h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #333;
}

.demo-tabs {
  width: 100%;
}

.tab-content {
  padding: 20px 0;
}

.form-content {
  max-width: 800px;
  min-height: 600px;
}

.el-form-item {
  margin-bottom: 15px;
}

/* 家属信息表格样式 */
.family-table {
  margin-top: 20px;
}

.operate-btns {
  display: flex;
  justify-content: left;
  gap: 8px;
}

/* 调整输入框和选择器样式 */
:deep(.el-input--small),
:deep(.el-select--small) {
  width: 100%;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

/* 底部按钮样式（固定在底部） */
.btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 16px 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.mr-3 {
  margin-right: 12px;
}

/* 资料上传页面样式（新增） */
/* 资料上传整体容器 */
.upload-container {
  padding: 20px;
}

/* 顶部提示条 */
.upload-tip {
  display: flex;
  align-items: center;
  background-color: #eaf5ff; /* 浅蓝提示色 */
  border: 1px solid #c3e6ff;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 24px;
  color: #666;
  font-size: 14px;
}
.upload-tip .el-icon-info {
  color: #409eff; /* 信息图标颜色 */
  margin-right: 8px;
}

/* 单个上传项布局 */
.upload-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px; /* 与设计图间距一致 */
}

/* 左侧标签样式 */
.item-label {
  width: 120px; /* 固定宽度，对齐设计图 */
  text-align: right;
  margin-right: 16px;
  color: #333;
  font-size: 14px;
}
.item-label::before {
  content: "*";
  color: #f00; /* 红色星号 */
  margin-right: 4px;
}

/* 上传框样式 */
.upload-box {
  width: 240px;
  height: 160px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.3s;
}
/* 不同上传项的宽度适配（如身份证框更宽） */
.upload-item:nth-child(2) .upload-box,
.upload-item:nth-child(3) .upload-box {
  width: 240px; /* 身份证框宽度 */
  height: 160px; /* 身份证框高度 */
}

/* 未上传时的占位 */
.placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}
.plus-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.placeholder p {
  margin: 0;
  font-size: 14px;
}

/* 已上传图片预览 */
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
}

/* 隐藏文件输入框 */
.hidden {
  display: none;
}
</style>